//路由规则

import Vue from 'vue'
import Router from 'vue-router'

// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/Welcome.vue')

// import Users from './components/users/Users.vue'
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/users/Users.vue')
// import Rights from './components/rights/Rights.vue'
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/rights/Rights.vue')
// import Roles from './components/rights/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Login_Home_Roles" */ './components/rights/Roles.vue')

// import Cate from './components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_GoodsParams" */ './components/goods/Cate.vue')
// import GoodsParams from './components/goods/GoodsParams.vue'
const GoodsParams = () => import(/* webpackChunkName: "Cate_GoodsParams" */ './components/goods/GoodsParams.vue')

// import Goods from './components/goods/Goods.vue'
const Goods = () => import(/* webpackChunkName: "Goods_addGoods" */ './components/goods/Goods.vue')
// import addGoods from './components/goods/addGoods.vue'
const addGoods = () => import(/* webpackChunkName: "Goods_addGoods" */ './components/goods/addGoods.vue')


Vue.use(Router)

var router = new Router({
  routes: [
    {path: '/',redirect: '/login'},
    {path: '/login',component: Login,name:"login"},
    {path: '/home',redirect: '/welcome',component: Home,
      children:[
        {path:'/welcome',component: Welcome},
        {path:'/users',component: Users},
        {path:'/rights',component: Rights},
        {path:'/roles',component: Roles},
        {path:'/categories',component: Cate},
        {path:'/params',component: GoodsParams},
        {path:'/goods',component: Goods},
        {path:'/addGoods',component: addGoods},
      ]
    }
  ]
})
/*     介绍路由钩子函数
// 在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
// 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
// 总体来讲vue里面提供了三大类钩子，两种函数
//  1、全局钩子
//  2、某个路由的钩子
//  3、组件内钩子
// 两种函数：
//  1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
//  2.Vue.afterEach(function(to,form))/*在跳转之后判断*/

// 下面这个拦截守卫属于全局钩子函数
//为了防止用户未登录访问其他页面，添加路由拦截守卫，该拦截器一旦设定 必须调用next才可以继续访问
// 路由自带的方法beforeEach()参数为一个函数 其函数有三个参数
   // to:router 即将进入的路由对象
   // from:当前导航即将离开的路由
   // next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
router.beforeEach((to,from,next)=>{
  if (to.path == '/login') {
    console.log(to);
    
    //用户访问登录页 放行
    next()
  }else{
    //如果访问其他页面 且sessStorage中有存储的token 证明登陆过 放行
    if (sessionStorage.getItem('token')) {
      next()
    }else{
      //否则 在next函数中加入参数强制跳转登录页面
      next('/login')
    }
  }
})

export default router
